<template>
    <el-dialog title="分配角色" v-model="props.visible" :before-close="beforeClose">
        <el-form :model="ownForm" label-width="100px">
            <el-form-item label="账号">
                <el-input v-model="ownForm.username"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="ownForm.nickName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="ownForm.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="ownForm.email"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="ownForm.note"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="ownForm.status">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, watch, ref, reactive, withDefaults, defineEmits } from 'vue'
import type { Ref } from 'vue'
import type { IAdminListItem } from '../../request/QmsAdminConreillerA/index'

let props = withDefaults(
    defineProps<{
        visible: boolean;
        form: IAdminListItem
    }>(), {
    visible: true
})

let originForm = ref({}) as Ref<IAdminListItem>   // 相当于一个空的备份
let ownForm = ref({}) as Ref<IAdminListItem>

console.log(props.visible);

watch(() => props.form, (newVal) => {
    ownForm.value = { ...newVal }
})

// 自定义事件
let emits = defineEmits<{
    (event: "cancel"): void;
    (event: "confirm", row: IAdminListItem): void
}>()

let beforeClose = (done: any) => {
    console.log('beforeClose');
    // console.log(done);
    // done()  // 一般我们不执行done 函数，应该由父级去监听自定义事件 然后关闭
    emits("cancel")
}

// 取消
let onCancel = () => {
    // 清空 实际上是点击取消的时候 ，将 ownForm 恢复成备份的值
    ownForm.value = { ...originForm.value }
    emits("cancel")
}

// 确定
let onConfirm = () => {
    // console.log(ownForm.value);
    // 将参数返回给父级 ，让父级发请求完成功能
    emits('confirm', ownForm.value)
}


</script>

<style scoped></style>